<template>
  <el-dialog
    v-model="dialogVisible"
    title="申请详情"
    width="60%"
    :before-close="handleClose"
    destroy-on-close
  >
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="8" animated />
    </div>

    <div v-else-if="applicationDetail" class="application-detail">
      <!-- 基本信息 - 可折叠 -->
      <el-card class="detail-card" shadow="never">
        <el-collapse v-model="activeCollapse">
          <el-collapse-item name="basicInfo">
            <template #title>
              <div class="card-header">
                <el-icon class="header-icon" color="#409eff">
                  <InfoFilled />
                </el-icon>
                <span class="header-title">基本信息</span>
              </div>
            </template>
            
            <div class="basic-info">
              <div class="info-row">
                <div class="info-item">
                  <label class="info-label">工作流名称：</label>
                  <span class="info-value">{{ applicationDetail.workflowInstance.workflowName }}</span>
                </div>
                <div class="info-item">
                  <label class="info-label">申请状态：</label>
                  <el-tag :type="getStatusType(applicationDetail.workflowInstance.status)" size="large">
                    {{ getStatusLabel(applicationDetail.workflowInstance.status) }}
                  </el-tag>
                </div>
              </div>
              
              <div class="info-row">
                <div class="info-item">
                  <label class="info-label">当前节点：</label>
                  <span class="info-value">{{ applicationDetail.workflowInstance.currentNodeName || '-' }}</span>
                </div>
                <div class="info-item">
                  <label class="info-label">申请人：</label>
                  <span class="info-value">{{ applicationDetail.workflowInstance.creator }}</span>
                </div>
              </div>
              
              <div class="info-row">
                <div class="info-item">
                  <label class="info-label">申请时间：</label>
                  <span class="info-value">{{ formatDate(applicationDetail.workflowInstance.createTime) }}</span>
                </div>
                <div class="info-item">
                  <label class="info-label">更新时间：</label>
                  <span class="info-value">{{ formatDate(applicationDetail.workflowInstance.updateTime) }}</span>
                </div>
              </div>
              
              <!-- <div v-if="applicationDetail.workflowInstance.description" class="info-row full-width">
                <div class="info-item full-width">
                  <label class="info-label">申请说明：</label>
                  <div class="info-value description">
                    {{ applicationDetail.workflowInstance.description }}
                  </div>
                </div>
              </div> -->
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-card>

      <!-- 表单数据 -->
      <el-card v-if="applicationDetail.workflowInstance.variables" class="detail-card" shadow="never">
        <template #header>
          <div class="card-header">
            <el-icon class="header-icon" color="#67c23a">
              <Document />
            </el-icon>
            <span class="header-title">表单数据</span>
          </div>
        </template>
        
        <div class="form-data">
          <div v-for="(field, key) in applicationDetail.workflowInstance.formConfig.fields" :key="key" class="form-item">
            <label class="form-label">{{ field.label }}：</label>
            <div class="form-value">
              <template v-for="(fieldValue, index) in [getFieldValue(field.name)]" :key="index">
                <template v-if="Array.isArray(fieldValue)">
                  <el-tag
                    v-for="(item, index) in fieldValue"
                    :key="index"
                    size="small"
                    class="form-tag"
                  >
                    {{ item }}
                  </el-tag>
                </template>
                <template v-else-if="typeof fieldValue === 'boolean'">
                  <el-tag :type="fieldValue ? 'success' : 'danger'" size="small">
                    {{ fieldValue ? '是' : '否' }}
                  </el-tag>
                </template>
                <template v-else>
                  <span class="form-text">{{ fieldValue || '-' }}</span>
                </template>
              </template>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 审批记录 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <div class="card-header">
            <el-icon class="header-icon" color="#e6a23c">
              <Clock />
            </el-icon>
            <span class="header-title">工单记录</span>
          </div>
        </template>
        
        <div v-if="applicationDetail.nodeActionHistories && applicationDetail.nodeActionHistories.length > 0" class="approval-records">
          <el-timeline>
            <el-timeline-item
              v-for="(record, index) in applicationDetail.nodeActionHistories"
              :key="index"
              :timestamp="formatDate(record.createTime)"
              :type="getApprovalType('默认')"
              :icon="getApprovalIcon(record.type)"
              placement="top"
            >
              <div class="approval-record" :class="getRecordTypeClass(record.type)">
                <!-- 记录表头 -->
                <div class="record-header">
                  <div class="record-header-left">
                    <div class="record-type-badge" :class="getRecordTypeBadgeClass(record.type)">
                      <el-icon class="record-type-icon">
                        <component :is="getRecordTypeIcon(record.type)" />
                      </el-icon>
                      <span class="record-type-text">{{ getNodeActionTypeLable(record.type) }}</span>
                    </div>
                    <div class="record-node-info">
                      <span class="node-name">{{ record.nodeName }}</span>
                      <span v-if="getRecordSubtitle(record)" class="record-subtitle">
                        {{ getRecordSubtitle(record) }}
                      </span>
                    </div>
                  </div>
                  <div class="record-header-right">
                    <el-tag :type="getApprovalTagType(record)" size="small" class="record-status-tag">
                      {{ getApprovalActionLabel(record) }}
                    </el-tag>
                  </div>
                </div>
                
                <!-- 记录内容 -->
                <div class="record-content">
                  <!-- 动态渲染不同类型的内容 -->
                  <!-- 类型13(评论), 14(拒绝), 99(取消申请) - 显示执行人 -->
                  <div v-if="record.type === 13 || record.type === 14 || record.type === 99" class="record-info">
                    <div v-if="record.actionInfo.operator && record.actionInfo.operator.length > 0" class="approver-section">
                      <span class="section-label"></span>
                      <div class="approver-list">
                        <span v-for="(op, idx) in record.actionInfo.operator" :key="idx" class="approver-item approved">
                          {{ op.operator }}
                        </span>
                      </div>
                    </div>
                  </div>
                  
                  <!-- 类型1,12：或,会签 - 显示审批人和未审批人 -->
                  <div v-else-if="record.type === 1 || record.type === 12" class="record-info">
                    <div class="approver-section">
                      <span class="section-label"></span>
                      <div class="approver-list">
                        <!-- 已审批人员 -->
                        <span v-for="(op, idx) in record.actionInfo.operator" :key="'approved-' + idx" class="approver-item approved">
                          {{ op.operator }}
                        </span>
                        <!-- 未审批人员 -->
                        <span v-for="(assignee, idx) in record.actionInfo.assignee" :key="'pending-' + idx" class="approver-item pending">
                          {{ assignee.name }}
                        </span>
                      </div>
                    </div>
                  </div>
                   <!-- 15(转办) - 显示转办流向 -->
                  <div v-else-if="record.type === 15" class="record-info transfer-info">
                    <div class="transfer-flow">
                      <!-- 转办发起人 -->
                      <div class="transfer-from">
                        <span class="transfer-label">转办人：</span>
                        <div class="transfer-users">
                          <span v-for="(fromAssignee, idx) in record.actionInfo.fromAssignees" :key="'from-' + idx" class="transfer-user from-user">
                            {{ fromAssignee.name }}
                          </span>
                        </div>
                      </div>
                      
                      <!-- 转办箭头 -->
                      <div class="transfer-arrow">
                        <el-icon class="arrow-icon"><ArrowRight /></el-icon>
                      </div>
                      
                      <!-- 转办接收人 -->
                      <div class="transfer-to">
                        <span class="transfer-label">转办给：</span>
                        <div class="transfer-users">
                          <span v-for="(toAssignee, idx) in record.actionInfo.toAssignees" :key="'to-' + idx" class="transfer-user to-user">
                            {{ toAssignee.name }}
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 2(抄送) - 显示抄送了record.ccUser -->
                  <div v-else-if="record.type === 2" class="record-info">
                    <div v-if="record.actionInfo.ccUser && record.actionInfo.ccUser.length > 0" class="approver-section">
                      <span class="section-label"></span>
                      <div class="approver-list">
                        <span v-for="(op, idx) in record.actionInfo.ccUser" :key="idx" class="approver-item approved">
                          {{ op.userName }}
                        </span>
                      </div>
                    </div>
                  </div>
                  
                  <!-- 评论或者审批意见内容 -->
                  <div v-if="record.comment && record.comment.trim()" class="record-comment">
                    <div class="comment-header">
                      <el-icon class="comment-icon"><ChatDotRound /></el-icon>
                      <span class="comment-label">{{ getCommentLabel(record.type) }}</span>
                    </div>
                    <div class="comment-content">{{ record.comment }}</div>
                  </div>
                  <!-- 转办原因 -->
                  <div v-if="record.type == 15 && record.actionInfo.reason.trim()" class="record-comment">
                    <div class="comment-header">
                      <el-icon class="comment-icon"><ChatDotRound /></el-icon>
                      <span class="comment-label">转办说明</span>
                    </div>
                    <div class="comment-content">{{ record.actionInfo.reason }}</div>
                  </div>
                </div>
              </div>
            </el-timeline-item>
            
            <!-- 后续可能的运行节点 -->
            <template v-if="applicationDetail.subsequentNodes && applicationDetail.subsequentNodes.length > 0">
              <el-timeline-item
                v-for="(pathNodes, pathIndex) in applicationDetail.subsequentNodes"
                :key="'path-' + pathIndex"
                :timestamp="'待执行'"
                type="info"
                :icon="Position"
                placement="top"
                class="subsequent-path"
              >
                <div class="subsequent-nodes">
                  <div class="path-header">
                    <span class="path-title">执行路径 {{ pathIndex + 1 }}</span>
                    <el-tag type="info" size="small">待执行</el-tag>
                  </div>
                  <div class="path-nodes">
                    <div 
                      v-for="(node, nodeIndex) in pathNodes" 
                      :key="'node-' + nodeIndex"
                      class="subsequent-node"
                    >
                      <div class="node-info">
                        <span class="node-type" :class="`node-type-${node.type}`">{{ getNodeTypeLabel(node.type) }}</span>
                        <span class="node-name">{{ node.nodeName }}</span>
                        <span v-if="node.examineMode === 1 || node.examineMode === 2" class="sign-type">
                          ({{ node.examineMode === 1 ? '或签' : '会签' }})
                        </span>
                      </div>
                      <div v-if="node.nodeUserList && node.nodeUserList.length > 0" class="node-users">
                        <span class="users-label"></span>
                        <div class="users-list">
                          <span v-for="(user, userIndex) in node.nodeUserList" :key="userIndex" class="user-item">
                            {{ user.name }}
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-timeline-item>
            </template>
            
            <!-- 工单结束标识 -->
             <el-timeline-item
               v-if="isFinishedStatus(applicationDetail.workflowInstance.status)"
               :timestamp="formatDate(applicationDetail.workflowInstance.updateTime)"
               :type="getFinishTimelineType(applicationDetail.workflowInstance.status)"
               :icon="getFinishIcon(applicationDetail.workflowInstance.status)"
               placement="top"
               class="finish-timeline-item"
             >
               <div :class="getWorkflowFinishClass(applicationDetail.workflowInstance.status)" class="workflow-finish">
                 <div class="finish-header">
                   <div :class="getFinishBadgeClass(applicationDetail.workflowInstance.status)" class="finish-badge-timeline">
                     <el-icon class="finish-icon">
                       <component :is="getFinishIcon(applicationDetail.workflowInstance.status)" />
                     </el-icon>
                     <span class="finish-text">{{ getFinishText(applicationDetail.workflowInstance.status) }}</span>
                   </div>
                 </div>
                 <div class="finish-description">
                   工单已{{ getFinishDescription(applicationDetail.workflowInstance.status) }}，流程结束。
                 </div>
               </div>
             </el-timeline-item>
          </el-timeline>
        </div>
        
        <div v-else class="empty-records">
          <el-empty description="暂无审批记录" :image-size="80" />
        </div>
      </el-card>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button
          v-if="shouldShowCancelButton"
          type="danger"
          @click="handleCancel"
        >
          取消申请
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  InfoFilled,
  Document,
  Clock,
  VideoPlay,
  VideoPause,
  Position,
  ArrowUp,
  ArrowRight,
  CircleCheck,
  CircleClose,
  Warning,
  ChatDotRound,
  User,
  Share,
  Switch,
  Close,
  Promotion
} from '@element-plus/icons-vue'
import { cancelWorkflowInstance, getWorkflowInstanceDetail } from '/@/api/workflow'
import type { NodeActionHistory, WorkflowInstance, WorkflowInstanceDetail } from '../types'

// Props
interface Props {
  visible: boolean
  application: WorkflowInstance | null
  source?: 'myApplications' | 'pendingApprovals' | 'other' // 来源页面标识
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'update:visible': [value: boolean]
  'refresh': []
}>()

// 响应式数据
const loading = ref(false)
const applicationDetail = ref<WorkflowInstanceDetail | null>(null)
const activeCollapse = ref([]) // 控制基本信息折叠状态，默认折叠

// 计算属性
const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

// 控制取消申请按钮显示
const shouldShowCancelButton = computed(() => {
  if (!applicationDetail.value?.workflowInstance) return false
  
  const status = applicationDetail.value.workflowInstance.status
  const isValidStatus = status === 'running' || status === 'approving'
  const isFromMyApplications = props.source === 'myApplications'
  
  return isFromMyApplications && isValidStatus
})

// 监听器 - 合并为一个watch避免重复执行
watch(
  () => [props.visible, props.application?.id] as const,
  async ([visible, applicationId], [prevVisible, prevApplicationId] = [false, undefined]) => {
    // 只有在对话框可见且有application时才加载详情
    if (visible && applicationId) {
      // 避免重复加载：只有在application变化或对话框从隐藏变为可见时才加载
      if (applicationId !== prevApplicationId || (!prevVisible && visible)) {
        await fetchApplicationDetail(applicationId)
      }
    }
  },
  { immediate: true }
)

// 方法
const fetchApplicationDetail = async (instanceId: number) => {
  loading.value = true
  try {
    const response = await getWorkflowInstanceDetail(instanceId)
    applicationDetail.value = response.data
  } catch (error) {
    ElMessage.error('获取申请详情失败')
  } finally {
    loading.value = false
  }
}

const handleClose = () => {
  dialogVisible.value = false
  applicationDetail.value = null
}

const handleCancel = async () => {
  if (!applicationDetail.value) return
  
  try {
    await ElMessageBox.confirm(
      `确定要取消申请"${applicationDetail.value.workflowInstance.workflowName}"吗？`,
      '确认取消',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    // 调用取消工作流实例api
    cancelWorkflowInstance({
      id: applicationDetail.value.workflowInstance.id
    })
    ElMessage.success('申请已取消')
    // 延迟刷新列表
    setTimeout(() => {
      emit('refresh')
      handleClose()
    }, 1000)
  } catch {
    // 用户取消操作
  }
}

const getStatusType = (status: string) => {
  const typeMap: Record<string, string> = {
    pending: 'warning',
    approved: 'success',
    rejected: 'danger',
    cancelled: 'info',
    completed: 'success',
    running: 'primary'
  }
  return typeMap[status] || 'info'
}

const getStatusLabel = (status: string) => {
  const labelMap: Record<string, string> = {
    pending: '待审批',
    approved: '已通过',
    rejected: '已拒绝',
    cancelled: '已取消',
    complete: '已完成',
    cancel: '已取消',
    reject: '已拒绝'
  }
  return labelMap[status] || status
}

// 判断是否为结束状态
const isFinishedStatus = (status: string) => {
  return ['complete', 'cancel', 'reject'].includes(status)
}

// 获取结束标识的样式类
const getFinishBadgeClass = (status: string) => {
  const classMap: Record<string, string> = {
    complete: 'finish-badge-success',
    cancel: 'finish-badge-warning', 
    reject: 'finish-badge-danger'
  }
  return classMap[status] || ''
}

// 获取结束标识的图标
const getFinishIcon = (status: string) => {
  const iconMap: Record<string, any> = {
    complete: CircleCheck,
    cancel: Warning,
    reject: CircleClose
  }
  return iconMap[status] || CircleCheck
}

// 获取结束标识的文本
const getFinishText = (status: string) => {
  const textMap: Record<string, string> = {
    complete: '流程结束',
    cancel: '流程取消',
    reject: '流程拒绝'
  }
  return textMap[status] || '流程结束'
}

// 获取时间线结束标识的类型
const getFinishTimelineType = (status: string) => {
  const typeMap: Record<string, string> = {
    complete: 'success',
    cancel: 'warning',
    reject: 'danger'
  }
  return typeMap[status] || 'success'
}

// 获取结束描述文本
const getFinishDescription = (status: string) => {
  const descMap: Record<string, string> = {
    complete: '完成',
    cancel: '取消',
    reject: '拒绝'
  }
  return descMap[status] || '完成'
}

// 获取工作流结束容器的样式类
const getWorkflowFinishClass = (status: string) => {
  const classMap: Record<string, string> = {
    complete: 'workflow-finish-success',
    cancel: 'workflow-finish-warning',
    reject: 'workflow-finish-danger'
  }
  return classMap[status] || 'workflow-finish-success'
}

const getFieldValue = (fieldName: string) => {
  return applicationDetail.value?.workflowInstance.variables[fieldName]
}

const getApprovalType = (type: string) => {
  const typeMap: Record<string, string> = {
    approve: 'success',
    reject: 'danger',
    submit: 'primary',
    cancel: 'warning'
  }
  return typeMap[type] || 'primary'
}

const getApprovalIcon = (type: number) => {
  const iconMap: Record<number, any> = {
    0: VideoPlay,
    1: VideoPause,
    2: Position,
    4: ArrowUp,
  }
  return iconMap[type] || Document
}

const getApprovalTagType = (record: NodeActionHistory) => {
  if (record.type === 1 || record.type === 12) {
    if (record.status === 'approving') {
      return 'primary' // 审批中
    }
    return 'success' // 已完成
  } else if (record.type === 14) {
    return 'danger' // 未通过
  } 
  return 'success' // 已处理
}

const getApprovalActionLabel = (record: NodeActionHistory) => {
  if (record.type === 1 || record.type === 12) {
    if (record.status === 'approving') {
      return '审批中'
    }
    return '已通过'
  }else if (record.type === 14) {
    return '未通过'
  } else {
    return '已处理'
  }
}

const getNodeActionTypeLable = (actionType: number) => {
  const typeMap: Record<number, string> = {
    0: '发起',
    1: '审批',
    12: '审批',
    13: '评论',
    14: '拒绝',
    15: '转办',
    2: '抄送',
    3: '条件',
    4: '路由',
    99: '取消申请'
  }

  return typeMap[actionType] || `类型${actionType}`
}

const getNodeTypeLabel = (nodeType: number) => {
  const typeMap: Record<number, string> = {
    0: '发起',
    1: '审批',
    2: '抄送',
    3: '条件',
    4: '路由'
  }
  return typeMap[nodeType] || `类型${nodeType}`
}

const formatDate = (date: Date) => {
  if (!date) return '-'
  try {
    return new Date(date).toLocaleString('zh-CN')
  } catch {
    return '-'
  }
}

// 获取记录类型样式类
const getRecordTypeClass = (type: number) => {
  const classMap: Record<number, string> = {
    0: 'record-type-start',
    1: 'record-type-approval',
    12: 'record-type-approval-multi',
    13: 'record-type-comment',
    14: 'record-type-reject',
    15: 'record-type-transfer',
    2: 'record-type-cc',
    3: 'record-type-condition',
    4: 'record-type-route',
    99: 'record-type-cancel'
  }
  return classMap[type] || 'record-type-default'
}

// 获取记录类型徽章样式类
const getRecordTypeBadgeClass = (type: number) => {
  const classMap: Record<number, string> = {
    0: 'badge-start',
    1: 'badge-approval',
    12: 'badge-approval-multi',
    13: 'badge-comment',
    14: 'badge-reject',
    15: 'badge-transfer',
    2: 'badge-cc',
    3: 'badge-condition',
    4: 'badge-route',
    99: 'badge-cancel'
  }
  return classMap[type] || 'badge-default'
}

// 获取记录类型图标
const getRecordTypeIcon = (type: number) => {
  const iconMap: Record<number, any> = {
    0: VideoPlay,
    1: User,
    12: User,
    13: ChatDotRound,
    14: Close,
    15: Promotion,
    2: Share,
    3: Switch,
    4: Position,
    99: Close
  }
  return iconMap[type] || Document
}

// 获取记录副标题
const getRecordSubtitle = (record: NodeActionHistory) => {
  if (record.type === 1) {
    return '或签 [任意1人审批通过]'
  } else if (record.type === 12) {
    return '会签 [需所有人审批通过]'
  }
  return ''
}

// 获取评论标签
const getCommentLabel = (type: number) => {
  if (type === 13) {
    return '评论内容'
  }
  return '审批意见'
}
</script>

<style scoped>
.loading-container {
  padding: 20px;
}

.application-detail {
  max-height: 70vh;
  overflow-y: auto;
}



.detail-card {
  margin-bottom: 20px;
}

.detail-card:last-child {
  margin-bottom: 0;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-icon {
  font-size: 18px;
}

.header-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.basic-info {
  padding: 16px 0;
}

.info-row {
  display: flex;
  margin-bottom: 16px;
  gap: 40px;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-row.full-width {
  flex-direction: column;
}

.info-item {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.info-item.full-width {
  width: 100%;
}

.info-label {
  color: #606266;
  font-weight: 500;
  white-space: nowrap;
  min-width: 80px;
}

.info-value {
  color: #303133;
  word-break: break-all;
}



@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 时间线结束标识样式 */
.workflow-finish {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 16px;
  border-left: 4px solid #52c41a;
}

.workflow-finish-success {
  border-left: 4px solid #67c23a;
}

.workflow-finish-warning {
  border-left: 4px solid #e6a23c;
}

.workflow-finish-danger {
  border-left: 4px solid #f56c6c;
}

.finish-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.finish-badge-timeline {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  background: #fff;
  border: 1px solid #d9d9d9;
}

.finish-badge-timeline.finish-badge-success {
  color: #52c41a;
  border-color: #52c41a;
  background: #f6ffed;
}

.finish-badge-timeline.finish-badge-warning {
  color: #fa8c16;
  border-color: #fa8c16;
  background: #fff7e6;
}

.finish-badge-timeline.finish-badge-danger {
  color: #ff4d4f;
  border-color: #ff4d4f;
  background: #fff2f0;
}

.finish-description {
  color: #666;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.info-value.description {
  background: #f5f7fa;
  padding: 12px;
  border-radius: 4px;
  line-height: 1.6;
  margin-top: 4px;
}

.form-data {
  padding: 16px 0;
}

.form-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 12px;
}

.form-item:last-child {
  margin-bottom: 0;
}

.form-label {
  color: #606266;
  font-weight: 500;
  white-space: nowrap;
  min-width: 100px;
}

.form-value {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.form-tag {
  margin: 0;
}

.form-text {
  color: #303133;
  word-break: break-all;
}

.approval-records {
  padding: 16px 0;
}

.approval-record {
  background: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.3s ease;
  position: relative;
}

.approval-record:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #c6e2ff;
}

/* 不同记录类型的边框颜色 */
.record-type-start {
  border-left: 4px solid #67c23a;
}

.record-type-approval,
.record-type-approval-multi {
  border-left: 4px solid #409eff;
}

.record-type-comment {
  border-left: 4px solid #e6a23c;
}

.record-type-cc {
  border-left: 4px solid #909399;
}

.record-type-condition,
.record-type-route {
  border-left: 4px solid #f56c6c;
}

.record-type-reject,
.record-type-cancel {
  border-left: 4px solid #f56c6c;
}

.record-type-transfer {
  border-left: 4px solid #722ed1;
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.record-header-left {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
}

.record-header-right {
  flex-shrink: 0;
}

.record-type-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.record-type-icon {
  font-size: 14px;
}

.record-type-text {
  font-weight: 500;
}

/* 徽章样式 */
.badge-start {
  background: #f0f9ff;
  color: #67c23a;
  border: 1px solid #b3e19d;
}

.badge-approval {
  background: #ecf5ff;
  color: #409eff;
  border: 1px solid #b3d8ff;
}

.badge-approval-multi {
  background: #ecf5ff;
  color: #1578db;
  border: 1px solid #a0cfff;
}

.badge-comment {
  background: #fdf6ec;
  color: #e6a23c;
  border: 1px solid #f0c78a;
}

.badge-cc {
  background: #f4f4f5;
  color: #909399;
  border: 1px solid #d3d4d6;
}

.badge-condition,
.badge-route {
  background: #fef0f0;
  color: #f56c6c;
  border: 1px solid #fab6b6;
}

.badge-reject,
.badge-cancel {
  background: #fef0f0;
  color: #f56c6c;
  border: 1px solid #fab6b6;
}

.badge-transfer {
  background: #f0f9ff;
  color: #722ed1;
  border: 1px solid #d3adf7;
}

/* 转办流向样式 */
.transfer-info {
  background: #fafbfc;
  border-radius: 8px;
  padding: 12px;
  border: 1px solid #e4e7ed;
}

.transfer-flow {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.transfer-from,
.transfer-to {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 120px;
}

.transfer-label {
  color: #606266;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.transfer-users {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.transfer-user {
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.transfer-user.from-user {
  background: #fff2e8;
  color: #fa8c16;
  border: 1px solid #ffd591;
}

.transfer-user.to-user {
  background: #f0f9ff;
  color: #722ed1;
  border: 1px solid #d3adf7;
}

.transfer-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.arrow-icon {
  font-size: 16px;
  color: #722ed1;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .transfer-flow {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .transfer-arrow {
    transform: rotate(90deg);
  }
  
  .transfer-from,
  .transfer-to {
    width: 100%;
    min-width: auto;
  }
}

.record-node-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.node-name {
  color: #303133;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
}

.record-subtitle {
  color: #909399;
  font-size: 12px;
  font-weight: normal;
  line-height: 1.3;
}

.record-status-tag {
  font-weight: 500;
}

/* 旧的node-type样式已被新的record-type-badge替代 */

/* 发起节点 */
.node-type-0 {
  background: #e1f3d8;
  color: #67c23a;
}

/* 审批节点(或签) */
.node-type-1 {
  background: #ecf5ff;
  color: #409eff;
}

/* 审批节点(会签) */
.node-type-12 {
  background: #ecf5ff;
  color: #1578db;
}

/* 审批节点(评论) */
.node-type-13 {
  background: #ecf5ff;
  color: #e407bf;
}

/* 抄送节点 */
.node-type-2 {
  background: #fdf6ec;
  color: #e6a23c;
}

/* 条件节点 */
.node-type-3 {
  background: #fef0f0;
  color: #f56c6c;
}

/* 路由节点 */
.node-type-4 {
  background: #f4f4f5;
  color: #909399;
}

.node-name {
  color: #303133;
  font-weight: 500;
}

.sign-type {
  color: #909399;
  font-size: 12px;
  font-weight: normal;
}

.approver-section {
  margin-bottom: 8px;
}

.section-label {
  color: #606266;
  font-size: 13px;
  font-weight: 500;
  margin-right: 8px;
}

.approver-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.approver-item {
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.approver-item.approved {
  background: #f0f9ff;
  color: #409eff;
  border: 1px solid #b3d8ff;
}

.approver-item.pending {
  background: #f5f5f5;
  /* color: #909399; */
  border: 1px solid #dcdfe6;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  opacity: 0.5;
}

.record-approver {
  color: #606266;
}

/* 旧的approver样式已被新的operator样式替代 */

.record-content {
  border-top: 1px solid #f0f2f5;
  padding-top: 12px;
}

/* 操作人员样式 */
.record-operators {
  margin-bottom: 12px;
}

.operator-section {
  margin-bottom: 8px;
}

.operator-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.operator-item {
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

/* 不同状态的操作人员样式 */
.operator-item.start {
  background: #f0f9ff;
  color: #67c23a;
  border-color: #b3e19d;
}

.operator-item.approved {
  background: #f0f9ff;
  color: #409eff;
  border-color: #b3d8ff;
}

.operator-item.pending {
  background: #f5f5f5;
  color: #909399;
  border-color: #dcdfe6;
  opacity: 0.7;
  position: relative;
}

.operator-item.pending::after {
  content: '待处理';
  position: absolute;
  top: -8px;
  right: -8px;
  background: #e6a23c;
  color: white;
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 8px;
  line-height: 1;
}

.operator-item.cc {
  background: #f4f4f5;
  color: #909399;
  border-color: #d3d4d6;
}

.operator-item.comment {
  background: #fdf6ec;
  color: #e6a23c;
  border-color: #f0c78a;
}

.operator-item.cancel {
  background: #fef0f0;
  color: #f56c6c;
  border-color: #fab6b6;
}

.record-operators-empty {
  color: #c0c4cc;
  font-size: 12px;
  font-style: italic;
  text-align: center;
  padding: 8px;
}

/* 评论样式 */
.record-comment {
  margin-top: 12px;
  padding: 12px;
  background: #fafbfc;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.comment-icon {
  font-size: 14px;
  color: #909399;
}

.comment-label {
  font-size: 12px;
  font-weight: 500;
  color: #606266;
}

.comment-content {
  color: #303133;
  font-size: 13px;
  line-height: 1.6;
  word-break: break-word;
  white-space: pre-wrap;
}

.record-time {
  color: #909399;
}

.record-comment {
  margin-top: 8px;
}

.comment-label {
  color: #606266;
  font-size: 13px;
  display: block;
  margin-bottom: 4px;
}

.comment-content {
  background: white;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
  color: #303133;
  font-size: 13px;
  line-height: 1.5;
}

.empty-records {
  padding: 40px 20px;
  text-align: center;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

:deep(.el-timeline-item__timestamp) {
  font-size: 12px;
  color: #909399;
}

:deep(.el-timeline-item__content) {
  padding-bottom: 20px;
}

:deep(.el-timeline-item__icon) {
  font-size: 20px !important;
  width: 20px !important;
  height: 20px !important;
}

:deep(.el-timeline-item__node) {
  width: 24px !important;
  height: 24px !important;
}

/* 后续节点样式 */
.subsequent-path {
  opacity: 0.5;
}

.subsequent-nodes {
  background: #f8f9fa;
  border: 1px dashed #d0d7de;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 6px;
}

.path-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e1e4e8;
}

.path-title {
  font-weight: 500;
  color: #586069;
  font-size: 14px;
}

.path-nodes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.subsequent-node {
  background: #ffffff;
  border: 1px solid #e1e4e8;
  border-radius: 4px;
  padding: 8px;
}

.node-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.node-users {
  display: flex;
  align-items: center;
  gap: 8px;
}

.users-label {
  color: #586069;
  font-size: 12px;
  min-width: 50px;
}

.users-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.user-item {
  background: #f1f3f4;
  color: #586069;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  border: 1px solid #d0d7de;
}

@media (max-width: 768px) {
  .info-row {
    flex-direction: column;
    gap: 12px;
  }
  
  .info-item {
    flex-direction: column;
    gap: 4px;
  }
  
  .info-label {
    min-width: auto;
  }
  
  .form-item {
    flex-direction: column;
    gap: 4px;
  }
  
  .form-label {
    min-width: auto;
  }
  
  .record-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}
</style>